<template>
<div class="header">
	<div class="header-left"><span class="iconfont">&#xe624;</span></div>
	<div class="header-input"><span class="iconfont">&#xe632;</span>输入城市/景点/游玩主题</div>
	<router-link to='/city'>
	<div class="header-right">{{this.city}}<span class="iconfont arrow-icon">&#xe64a;</span></div>
	</router-link>
</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
	name:'HomeHeader',
	computed: {
		...mapState(['city'])
	}
}
</script>

<style lang="stylus" scoped>
 @import '~styles/varibles.styl'

.header
 display:flex
 height:.86rem
 background:$bgColor
.header-left
 width:.64rem
 float:left
 color:#fff
 text-align:center
 line-height:.86rem
.header-input
 flex:1
 margin:.1rem 0 .2rem .2rem
 height:.64rem
 line-height:.64rem
 background:white
 border-radius:.1rem
 color:#eee
 padding-left:.1rem
.header-right
 min-width:1.04rem
 padding:0 .1rem
 float:right 
 color:white
 text-align:center
 line-height:.86rem
.arrow-icon
 font-size:.24rem
 padding-left:.1rem
</style>